<template>
  <view>
    <l-background />
    <view class="margin-top-16">
      <l-form-cell
        v-for="(item,index) in formList"
        :key="index"
        v-model="form[item.attr]"
        :label="item.placeholder || item.label"
        :placeholder="item.toast || '请输入' + item.placeholder"
        :must="item.must"
        :maxlength="item.maxlength"
        :type="item.type"
        :unlined="item.attr==='roleName'"
        :arrow="item.attr==='roleName'"
        :has-slot="item.attr==='roleName'"
        @click="showPopup = item.attr==='roleName'"
      >
        <text class="text-30" :class="['color-t' + (form.roleName ? 1 : 3)]">{{ form.roleName || '请选择角色权限' }}</text>
      </l-form-cell>

      <view class="button">
        <tui-button @click="save">确认{{ memberInfo ? '修改' : '添加' }}</tui-button>
      </view>
    </view>

    <choose-role :show.sync="showPopup" :role="form.role" @confirm="confirm" />
  </view>
</template>

<script>
import ChooseRole from '../components/choose-role/choose-role'
import { mapGetters } from 'vuex'
import { formVerify } from '@/common/util'
import { addSubAccount, update } from '../api'
export default {
  name: 'SaveMember',
  components: {
    ChooseRole
  },
  data() {
    return {
      form: {
        userId: '',
        companyUserId: '',
        nickname: '',
        phone: '',
        role: '',
        roleName: '',
        subType: 2
      },
      showPopup: false
    }
  },
  computed: {
    formList() {
      if (this.memberInfo) {
        return [
          { attr: 'nickname', placeholder: '姓名', must: true, type: 'text', maxlength: -1 },
          { attr: 'roleName', toast: '请选择角色权限', label: '择角色权限', must: true, type: 'text', maxlength: -1 }
        ]
      } else {
        return [
          { attr: 'nickname', placeholder: '姓名', must: true, type: 'text', maxlength: -1 },
          { attr: 'phone', placeholder: '手机号', must: true, type: 'number', maxlength: 11, test: 'mobile' },
          { attr: 'roleName', toast: '请选择角色权限', label: '择角色权限', must: true, type: 'text', maxlength: -1 }
        ]
      }
    },
    ...mapGetters({
      memberInfo: 'memberInfo',
      userId: 'userId'
    })
  },
  onShow() {
    let title = '新增成员'
    if (this.memberInfo) {
      title = '编辑成员'
      Object.keys(this.form).forEach(key => {
        if (key !== 'subType') this.form[key] = this.memberInfo[key]
      })
    }
    uni.setNavigationBarTitle({
      title
    })
    this.form.companyUserId = this.userId
  },
  methods: {
    // 确认权限选择
    confirm(e) {
      this.showPopup = false
      const role = []
      const roleName = []
      e.forEach(item => {
        role.push(item.value)
        roleName.push(item.label)
      })
      this.form.role = role.join(',')
      this.form.roleName = roleName.join(',')
    },
    async save() {
      if (formVerify(this.form, this.formList)) {
        let api = addSubAccount
        if (this.memberInfo) {
          api = update
        }
        const [err, res] = await api(this.form)
        if (!this.$http.errorCheck(err, res)) return false
        this.toast(this.memberInfo ? '修改成功' : '新增成功', () => {
          this.jump()
        })
      }
    }
  }
}
</script>

<style scoped>
.button{
  margin-top:80rpx;
  padding:0 26rpx;
}
</style>
